import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Space, Button, message, Radio, Row, Col, Select } from 'antd';
const { TextArea } = Input;
import { OPERATE_ADD, OPERATE_EDIT, TREE_ROOT, STATUS_YES, STATUS_ENABLED, SELECT_LABEL, SELECT_VALUE } from '../../../constants/index'
import { useIntl } from 'umi'
import { createDictData, updateDictData } from '../../../services/dictData/index'
import { queryDictTypeEnableList } from '../../../services/dictType';
const DictDataOperatePanel = ({ operateType, dictDate, closePanel }) => {
    const intl = useIntl();
    const [form] = Form.useForm();
    const [open, setOpen] = useState(true);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [dictTypeEnableList, setDictTypeEnableList] = useState();
    const [dictTypeSelectLoading, setDictTypeSelectLoading] = useState(true);
    let initDictTypeList = async () => {
        await queryDictTypeEnableList().then(res => {
            if (res.success) {
                setDictTypeEnableList(res.data)
                setDictTypeSelectLoading(false)
            }
        }).catch(err => {
            setDictTypeSelectLoading(false)
        })
    }
    useEffect(() => {
        initDictTypeList()
    }, [])
    const handleOk = async (form) => {
        setConfirmLoading(true);
        await createDictData(form).then(res => {
            if (res.success) {
                message.success(res.msg)
                setConfirmLoading(false)
                handleCancel()
            } else {
                message.error(res.msg)
                setConfirmLoading(false)
            }
        }).catch(err => {
            console.log(err);
            setConfirmLoading(false)
        })

    };
    const handleCancel = () => {
        setOpen(false);
    };
    return (
        <>
            <Modal
                title={operateType === OPERATE_ADD ? "新增字典值" : "编辑字典值"}
                open={open}
                destroyOnClose={true}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
                afterClose={closePanel}
                centered={true}
                footer={false}
            >
                <Form
                    name={form}
                    style={{
                        maxWidth: 600,
                    }}
                    onFinish={handleOk}
                    labelCol={{ span: 7 }}
                    wrapperCol={{ span: 17 }}
                    initialValues={dictDate}
                    autoComplete="on"
                >
                    <Form.Item
                        label={intl.formatMessage({
                            id: 'app.dictData.form.lable.dictType',
                            defaultMessage: '所属字典类型'
                        })}
                        name="dictTypeUnCode"
                        rules={[
                            {
                                required: true,
                                message: intl.formatMessage({
                                    id: 'app.dictData.form.rule.message.dictType',
                                    defaultMessage: '请输入所属字典类型'
                                }),
                            },
                        ]}
                    >
                        <Select
                            loading={dictTypeSelectLoading}
                            defaultValue={dictDate?.dictTypeUnCode}
                            fieldNames={{ label: SELECT_LABEL, value: SELECT_VALUE }}
                            showSearch
                            placeholder="查询字典类型"
                            filterOption={(input, option) =>
                                (option?.name ?? '').toLowerCase().includes(input.toLowerCase())
                            }
                            options={dictTypeEnableList}
                        />
                    </Form.Item>
                    <Form.Item
                        label={intl.formatMessage({
                            id: 'app.dictData.form.lable.code',
                            defaultMessage: '字典值编码'
                        })}
                        name="code"
                        rules={[
                            {
                                required: true,
                                message: intl.formatMessage({
                                    id: 'app.dictData.form.rule.message.code',
                                    defaultMessage: '请输入字典值编码'
                                }),
                            },
                        ]}
                    >
                        <Input placeholder={intl.formatMessage({
                            id: 'app.dictData.form.input.placeholder.code',
                            defaultMessage: '请输入字典值编码'
                        })} />
                    </Form.Item>

                    <Form.Item
                        label={intl.formatMessage({
                            id: 'app.dictData.form.lable.name',
                            defaultMessage: '字典值名称'
                        })}
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: intl.formatMessage({
                                    id: 'app.dictData.form.rule.message.name',
                                    defaultMessage: '请输入字典值名称'
                                }),
                            },
                        ]}
                    >
                        <Input placeholder={intl.formatMessage({
                            id: 'app.dictData.form.input.placeholder.name',
                            defaultMessage: '请输入字典值名称'
                        })} />
                    </Form.Item>
                    <Form.Item
                        label={intl.formatMessage({
                            id: 'app.dictData.form.lable.value',
                            defaultMessage: '字典值'
                        })}
                        name="value"
                        rules={[
                            {
                                required: true,
                                message: intl.formatMessage({
                                    id: 'app.dictData.form.rule.message.value',
                                    defaultMessage: '请输入字典值'
                                }),
                            },
                        ]}
                    >
                        <Input placeholder={intl.formatMessage({
                            id: 'app.dictData.form.input.placeholder.value',
                            defaultMessage: '请输入字典值'
                        })} />
                    </Form.Item>
                    <Form.Item
                        initialValue={STATUS_YES}
                        label={intl.formatMessage({
                            id: 'app.dictData.form.lable.isDefault',
                            defaultMessage: '是否默认'
                        })}
                        name="isDefault">
                        <Radio.Group >
                            <Radio value={'Y'}>{intl.formatMessage({
                                id: 'component.radio.status.yes',
                                defaultMessage: '是'
                            })}</Radio>
                            <Radio value={'N'}>{intl.formatMessage({
                                id: 'component.radio.status.no',
                                defaultMessage: '否'
                            })}</Radio>
                        </Radio.Group>
                    </Form.Item>
                    {OPERATE_ADD != operateType &&<Form.Item
                        initialValue={STATUS_ENABLED}
                        label={intl.formatMessage({
                            id: 'app.dictData.form.lable.statusFlag',
                            defaultMessage: '是否启用'
                        })}
                        name="statusFlag">
                        <Radio.Group >
                            <Radio value={'ENABLED'}>{intl.formatMessage({
                                id: 'component.radio.status.enabled',
                                defaultMessage: '启用'
                            })}</Radio>
                            <Radio value={'DISABLED'}>{intl.formatMessage({
                                id: 'component.radio.status.disabled',
                                defaultMessage: '禁用'
                            })}</Radio>
                        </Radio.Group>
                    </Form.Item>}
                    <Row justify="end">
                        <Col>
                            <Space>
                                <Button htmlType="button" onClick={handleCancel}>
                                    {intl.formatMessage({
                                        id: 'component.button.cancel',
                                    })}
                                </Button>
                                <Button type="primary" htmlType="submit">
                                    {intl.formatMessage({
                                        id: 'component.button.submit',
                                    })}
                                </Button>
                            </Space>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        </>
    );
}
export default DictDataOperatePanel